<template>
	<div class="home-box">
		<div class="home-simg">
			<div class="home-bg">
				<div class="home-bg_cto">
					<p class="home-bg_h1">数字科技服务实体经济</p>
					<p class="home-bg_h1">开放连接践行普惠赋能</p>
				</div>
			</div>
		</div>
		<div class="home-intro">{{viewModel.description}}</div>
		<div class="home-ul">
			<div class="home-head">新闻动态</div>
			<div class="home-ul_li" v-for="(item,index) in newsList" :key="index">
				<img class="home-ul_ig" :src="$ala.urlImage(item.image)" />
				<div class="news-item-box">
					<div class="news-item-box-wrap">
						<p class="news-item-box__title">{{item.title}}</p>
						<p class="news-item-box__desc">{{item.intro}}</p>
					</div>
					<div class="news-item-box__date">{{item.createTime}}</div>
				</div>
			</div>
		</div>
		<div class="service-main">
			<div class="service-item" v-for="(gItem,gIndex) in gridList" :key="gIndex">
				<img class="service-item_p1" :src="$ala.urlImage(gItem.img)" />
				<p class="service-item_p2">{{gItem.name}}</p>
				<p class="service-item_p3">{{gItem.intro}}</p>
			</div>
		</div>
		<div class="bank-main">
			<div class="bank-main_hd">合作伙伴</div>
			<img class="bank-main_kig" :src="mItem" v-for="(mItem,mIndex) in imageList" :key="mIndex" />
		</div>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				viewModel: {},
				newsList: [],
				gridList: [{
					name: '行稳致远',
					intro: '立足长远、敬畏风险',
					img: 'https://cdn.cnbj1.fds.api.mi-img.com/mifi-web/img/1.cd34bcf.png'
				}, {
					name: '开放连接',
					intro: '践行普惠、服务实体',
					img: 'https://cdn.cnbj1.fds.api.mi-img.com/mifi-web/img/2.b5c137f.png'
				}, {
					name: '技术立',
					intro: '科技为先、安全高效',
					img: 'https://cdn.cnbj1.fds.api.mi-img.com/mifi-web/img/3.f478f0c.png'
				}, {
					name: '服务为重',
					intro: '用户第一、优化体验',
					img: 'https://cdn.cnbj1.fds.api.mi-img.com/mifi-web/img/4.b85b0d4.png'
				}],
				imageList: ['https://cdn.cnbj1.fds.api.mi-img.com/mifi-web/img/bank1.a87d4d7.png',
					'https://cdn.cnbj1.fds.api.mi-img.com/mifi-web/img/bank2.1e7d5f0.png',
					'https://cdn.cnbj1.fds.api.mi-img.com/mifi-web/img/bank3.bf3f175.png',
					'https://cdn.cnbj1.fds.api.mi-img.com/mifi-web/img/bank4.c30141c.png',
					'https://cdn.cnbj1.fds.api.mi-img.com/mifi-web/img/bank5.2078417.png',
					'https://cdn.cnbj1.fds.api.mi-img.com/mifi-web/img/bank6.0aaeef1.png',
					'https://cdn.cnbj1.fds.api.mi-img.com/mifi-web/img/bank7.36291d2.png',
					'https://cdn.cnbj1.fds.api.mi-img.com/mifi-web/img/bank8.1c7821b.png',
					'https://cdn.cnbj1.fds.api.mi-img.com/mifi-web/img/bank9.253aab9.png',
					'https://cdn.cnbj1.fds.api.mi-img.com/mifi-web/img/bank10.2e45cd8.png'
				]
			}
		},
		mounted() {
			this.init()
		},
		methods: {
			async init() {
				this.viewModel = await this.$ala.httpGet('api/AutoConfig/Get', {
					type: 'WebSiteConfig'
				})
				var repones = await this.$ala.httpGet('api/auto/table?type=TopLine&pageIndex=1&pageSize=4')
				this.newsList = repones.result.result
			}
		}
	}
</script>
<style lang="scss">
	.home-box {
		.home-simg {
			width: 100%;
			height: 484px;
			background-color: #0f3eca;
			position: relative;

			.home-bg {
				width: 1002px;
				height: 484px;
				background: url('https://bbp.5ug.com/wwwroot/uploads/api/980-617-609/2021-08-21/6120a23e261c478efb939b1b.png') no-repeat;
				background-size: 100% 100%;
				margin: auto;
				position: relative;

				.home-bg_cto {
					position: absolute;
					top: 50%;
					transform: translateY(-50%);

					.home-bg_h1 {
						width: 1002px;
						font-size: 54px;
						color: #fff;
						font-weight: 500;
						letter-spacing: 15px;
						line-height: 80px;
						text-align: center;
					}
				}
			}

			.home-simg_mark {
				width: 100%;
				height: 40px;
				position: absolute;
				bottom: 0;
				z-index: 10;
				display: flex;
				align-items: center;

				.home-simg_k1 {
					height: 40px;
					flex: 1;
					background-color: #FFFFFF;
				}

				.home-simg_k2 {
					width: 120px;
					height: 40px;
				}
			}
		}

		.home-intro {
			max-width: 840px;
			font-size: 18px;
			color: #333;
			line-height: 30px;
			margin-left: auto;
			margin-right: auto;
			padding: 65px 0 90px;
		}

		.home-ul {
			width: 1002px;
			margin: auto;

			.home-head {
				font-size: 42px;
				color: #000a1f;
				font-weight: 500;
				text-align: center;
				margin-bottom: 50px;
			}

			.home-ul_li {
				width: 485px;
				height: 550px;
				display: inline-block;
				cursor: pointer;
				transition: all .3s ease-in-out;
			}

			.home-ul_li:nth-child(2n) {
				margin-right: 32px;
				margin-bottom: 32px;
			}

			.home-ul_li:hover {
				transform: scale(1.04);
				box-shadow: 0 10px 18px 0 rgba(0, 0, 0, 0.15);
			}

			.home-ul_ig {
				width: 100%;
				height: 265px;
				border-bottom-left-radius: 15px;
				border-bottom-right-radius: 15px;
			}

			.news-item-box {
				display: flex;
				flex-direction: column;
				height: 285px;
				padding: 0 38px 35px;

				.news-item-box-wrap {
					flex: 1;
				}

				.news-item-box__title {
					font-size: 28px;
					font-weight: 500;
					color: #000a1f;
					margin-top: 30px;
					margin-bottom: 20px;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}

				.news-item-box__desc {
					font-size: 18px;
					color: #333;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 4;
					overflow: hidden;
					line-height: 30px;
				}

				.news-item-box__date {
					font-size: 18px;
					color: #000a1f;
					height: 27px;
					line-height: 27px;
					opacity: .3;
				}
			}
		}

		.service-main {
			width: 1002px;
			margin: auto;
			display: flex;

			.service-item {
				flex: 1;
				display: flex;
				flex-direction: column;
				align-items: center;

				.service-item_p1 {
					margin-top: 40px;
					margin-bottom: 7px;
					width: 72px;
					height: 72px;
				}

				.service-item_p2 {
					font-size: 24px;
					color: #000a1f;
					font-weight: 500;
					margin-bottom: 15px;
					text-align: center;
				}

				.service-item_p3 {
					margin-bottom: 8px;
					display: flex;
					align-items: center;
					justify-content: center;
					color: #333;
					font-size: 16px;
				}
			}
		}

		.bank-main {
			width: 1002px;
			margin: auto;

			.bank-main_hd {
				margin-top: 90px;
				margin-bottom: 48px;
				text-align: center;
				font-size: 42px;
				color: #000a1f;
				font-weight: 500;
			}

			.bank-main_kig {
				width: 190px;
				height: 84px;
				margin-right: 8px;
				margin-bottom: 12px;
			}
		}
	}
</style>